<template>
	<div class="articles" id="article">
		<!-- <banner></banner> -->
		<!-- 文章目录 -->
		<div id="article-menus" v-show="menus.length > 0">
			<section-title>目录</section-title>
			<menu-tree :menus="menus" child-label="child"></menu-tree>
		</div>
		<div class="site-content animate">
			<main class="site-main">
				<article class="hentry">
					<!-- 文章头部 -->
					<header class="entry-header">
						<!-- 标题输出 -->
						<h1 class="entry-title" v-text="article.title"></h1>
						<hr>
						<div class="breadcrumbs">
							<div id="crumbs">最后更新时间：{{article.updateDate}}</div>
						</div>
					</header>
					<!-- 正文输出 -->
					<html-panel :url.asyc="article.txtUrl" class="entry-content"></html-panel>
					<!-- 文章底部 -->
					<footer class="post-footer">
						<!-- 阅读次数 -->
						<div class="post-like">
							<i class="iconfont iconeyes"></i>
							<span class="count">{{article.count}}</span>
						</div>
						<!-- 分享按钮 -->
						<!--                        <div class="post-share">-->
						<!--                            <ul class="sharehidden">-->
						<!--                                <li><a href="http://qr.liantu.com/api.php?text=https://zhebk.cn/Web/gongan.html"-->
						<!--                                       onclick="window.open(this.href, 'renren-share', 'width=490,height=700');return false;"-->
						<!--                                       class="s-weixin" target="_blank" rel="nofollow noopener noreferrer"><img src="https://cdn.zhebk.cn/usr/themes/Akina/images/wechat.png"></a></li>-->
						<!--                                <li>-->
						<!--                                    <a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://zhebk.cn/Web/gongan.html/&amp;title=公安联网备案记录"-->
						<!--                                       onclick="window.open(this.href, 'weibo-share', 'width=730,height=500');return false;"-->
						<!--                                       class="s-qq" target="_blank" rel="nofollow noopener noreferrer"><img src="https://cdn.zhebk.cn/usr/themes/Akina/images/qzone.png"></a></li>-->
						<!--                                <li>-->
						<!--                                    <a href="http://service.weibo.com/share/share.php?url=https://zhebk.cn/Web/gongan.html/&amp;title=公安联网备案记录"-->
						<!--                                       onclick="window.open(this.href, 'weibo-share', 'width=550,height=235');return false;"-->
						<!--                                       class="s-sina" target="_blank" rel="nofollow noopener noreferrer"><img src="https://cdn.zhebk.cn/usr/themes/Akina/images/sina.png"></a></li>-->
						<!--                                <li>-->
						<!--                                    <a href="http://shuo.douban.com/!service/share?https://zhebk.cn/Web/gongan.html/&amp;title=公安联网备案记录"-->
						<!--                                       onclick="window.open(this.href, 'renren-share', 'width=490,height=600');return false;"-->
						<!--                                       class="s-douban" target="_blank" rel="nofollow noopener noreferrer"><img src="https://cdn.zhebk.cn/usr/themes/Akina/images/douban.png"></a></li>-->
						<!--                            </ul>-->
						<!--                            <i class="iconfont show-share"></i>-->
						<!--                        </div>-->
						<!-- 赞助按钮 -->
						<!-- <div class="donate" @click="showDonate=!showDonate">
								<span>赏</span>
								<ul class="donate_inner" :class="{'show':showDonate}">
									<li class="wedonate"><img src="http://cdn.fengziy.cn/gblog/wexin_pay.png">
										<p>微信</p>
									</li>
									<li class="alidonate"><img src="http://cdn.fengziy.cn/gblog/ali_pay.jpg">
										<p>支付宝</p>
									</li>
								</ul>
							</div> -->
						<!-- 文章标签 -->
						<div class="post-tags">
							<el-tag style="margin-right: 10px;cursor: pointer;"
								v-for="item in article.relationCategorys" type="success" effect="dark">
								<i class="el-icon-collection-tag"></i>
								{{ item.name }}
							</el-tag>
						</div>
					</footer>
					<!--声明-->
					<div class="open-message">
						<p>声明：way博客|版权所有，违者必究|如未注明，均为原创|本网站采用<a
								href="https://creativecommons.org/licenses/by-nc-sa/3.0/"
								target="_blank">BY-NC-SA</a>协议进行授权</p>
						<p>转载：转载请注明原文链接 - <a v-bind:href="path">{{article.title}}</a></p>
					</div>
					<div class="guide">
						<a :href="`/article/${preAndNext.pre.id}`">上一篇:{{preAndNext.pre.title}}</a>
						<a :href="`/article/${preAndNext.next.id}`"
							style="float: right;">下一篇:{{preAndNext.next.title}}</a>
					</div>
				</article>
				<!-- 发表评论 -->
				<div class="publishComment hentry">
					<sectionTitle>发表评论</sectionTitle>
					<messageEditor :successCallback="submitPublishComment"></messageEditor>
				</div>
				<!--评论-->
				<div class="comments hentry" v-if="comments.length > 0">
					<sectionTitle>所有评论</sectionTitle>
					<comment v-for="item in comments" :key="item.id" :comment="item" :commentId="item.id">
						<template v-if="item.replys.length">
							<comment v-for="reply in item.replys" :key="reply.id" :comment="reply" :commentId="item.id">
							</comment>
						</template>
					</comment>
					<div>
						<el-pagination @current-change="handleSizeChange" background
							layout="total, prev, pager, next, jumper" :total="comments_total" :page-size="pageSize"
							:hide-on-single-page="true">
						</el-pagination>
					</div>
				</div>
				<div v-if="brothers.length > 0" class="hentry">
					<sectionTitle>延申阅读</sectionTitle>
					<ul>
						<li v-for="item in brothers">
							<a :href="`/article/${item.id}`"></a> {{item.name}}
						</li>
					</ul>
				</div>
			</main>
		</div>
	</div>
</template>

<script>
	import article from '@/assets/js/article.js'
	export default {
	  name: 'article',
	  mixins: [
	    article
	  ],
	  mounted () {
	  },
	  beforeDestroy () {
	  }
	}
</script>
<style lang="less" src="@/assets/css/article.less">
</style>
<style scoped lang="less" src="@/assets/css/article_sco.less">
</style>
